<template>
  <view :class="['comment-virtual-input', 'location-' + props.location]">
    <img class="comment-user" :src="userFace" alt="">
    <view class="comment-btn" @click="userInfoBack({commentLevel:1}, 0)">爱评论的人运气都不会差</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from '@/store'
const store = useStore()
const defaultFace = 'https://img.qumoyugo.com/img/2YRDV5ASYQOP0PI864BYZ1651137572615.png'
const userFace = ref(store.state?.profile?.attr?.face || defaultFace)
const props = defineProps({
  location: { // 'bottom', 'none'
    type: String,
    default: 'none'
  }
})
const emit = defineEmits(['clickback'])

const userInfoBack = (info, parentId) => {
  const res = {
    parentId: parentId, // 评论的父级id
    commentLevel: info.commentLevel
  }
  emit('clickback', res)
}
</script>

<style scoped lang="scss">
$input-size: 68rpx;
.comment-virtual-input{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  &.location-bottom{
    position: fixed;
    border-top: 2rpx solid rgb(97 97 97 / 20%);
    left: 0;
    bottom: 0;
    width: 100vw;
    padding: 8px 24rpx;
  }
  &.location-none{
    margin: 36rpx 0;
  }
  >.comment-user{
    width: $input-size;
    height: $input-size;
    border-radius: $input-size;
  }
  >.comment-btn{
    width: calc(100% - 100rpx);
    border-radius: 8rpx;
    height: $input-size;
    line-height: $input-size;
    background-color: #F5F5F5;
    padding: 0 32rpx;
    color: #999999;
  }
}
</style>
